<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>蓉车宝</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
    <link rel="stylesheet" type="text/css" href="city/city.css">
    <link rel="stylesheet" type="text/css" href="css/shoppingCar.css">
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="script/home_ban.js"></script>
    <script type="text/javascript" src="script/eg_top_search.js"></script>
    <script type="text/javascript" src="script/city.js"></script>
    <script type="text/javascript" src="script/snncar.js"></script>
    <script type="text/javascript" src="script/jquery.SuperSlide.2.1.1.js"></script>
    <!--引入vue和Axios.js 先导入vue  再导入axios -->
    <script src="pluging/vue/dist/vue.js"></script>
    <script src="pluging/axios/dist/axios.js"></script>
    <script src="script/comme.js"></script>

    <!--导航登陆网页版下拉-->
    <script type="text/javascript">
        $(function () {
            var setTime;
            $(".egc-top .nav-cent .operate").hover(function () {
                var _this = $(this);
                setTime = setTimeout(function () {
                    _this.find(".sec-version").slideDown(200);
                    _this.find("i").removeClass("icon-angle-down").addClass("icon-angle-up");
                }, 200);
            }, function () {
                if (setTime) {
                    clearTimeout(setTime);
                }
                $(".egc-top .nav-cent .sec-version").slideUp(200);
                $(".egc-top .nav-cent .operate i").removeClass("icon-angle-up").addClass("icon-angle-down");
            });
        });
    </script>

    <!--下拉导航关闭-->
    <script type="text/javascript">
        $(function () {
            $('.menu-mb i').click(function () {
                $(".navigation-mb-list").slideDown(300);
            });
            $('.navigation-mb-list .list-close-btn').click(function () {
                $(".navigation-mb-list").slideUp(300);
            });
        });
    </script>

    <script type="text/javascript">
        $(function () {
            var scroll_heitht = $('body').offset().top;
            var isShow = true;
            $(window).scroll(function () {
                if ($(window).scrollTop() > scroll_heitht && isShow) {
                    $('.stress-search-box').slideDown(200);
                } else {
                    $('.stress-search-box').slideUp(200);
                }
            });
            $('.stress-close a').click(function () {
                isShow = false;
                $('.stress-search-box').slideUp(200).unbind(window, aa);
            });
        });
    </script>
</head>
<body>
<div id="userDiv">
    <div class="egc-top">
        <div class="nav-cent">
            <div class="top-r">
          <span id="noLoginSpan">
            <a href="javascript:void(0)" id="b-regist">注册</a>
            |
            <a href="#" id="b-login" class="b-login">登陆</a>
            |
             <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx03bd86056bd3fc0e&redirect_uri=http://wx.rongcarservice.com/callback.html&response_type=code&scope=snsapi_login&state=123456#wechat_redirect"
                id="b-wx-login">微信登陆</a>
            |
            <a href="/shoppingCar.html">购物车</a>
          </span>
                <span id="loginSpan" style="display: none;">
              欢迎您!{{username}}
              <a href="#" id="b-logout" class="b-login">登出</a>
          </span>

            </div>
            <div class="top-l">全国统一客服热线：XXX</div>
            <div class="clear_fix"></div>
        </div>
    </div>
    <div class="w">
        <div class="cart-filter-bar" style="color: red;font-weight: bold;font-size: 16px;">
            <ul class="switch-cart">
                <li class="switch-cart-item">
                    <a href="#none" style="color: red;"><em>全部商品</em>
                        <span class="number" style="margin-left: 10px;">{{totol}}</span>
                    </a>
                    <span class="amount-sum">已选择<em> {{product.length}}</em>件商品<b
                            class="up"></b>
                        <span v-for="p in product">
                            {{p}}
                        </span>
                    </span>

                </li>
            </ul>
        </div>
        <div class="clr"></div>
        <div class="cart-thead" >
            <div class="column t-checkbox">
                <div class="cart-checkbox" >
                    <input type="checkbox" name="select-all"  class="jdcheckbox"
                           clstag="pageclick|keycount|Shopcart_CheckAll|0">
                </div>
                全选
            </div>
            <div class="column t-goods">商品</div>
            <div class="column t-props">购买数量</div>
            <div class="column t-price">单价</div>
            <div class="column t-quantity">数量</div>
            <div class="column t-sum">小计</div>
            <div class="column t-action">操作</div>
        </div>
        <div class="cart-tbody" v-for="car in shoppings">
            <div ></div>
            <div class="shop" >
                <div class="cart-checkbox">
                    <input   type="checkbox" name="checkShop" class="jdcheckbox"
                           clstag="pageclick|keycount|Shopcart_CheckShop|1_10907465" v-if="car.state == 1" checked value="1"  @click="checkedShop($event,car)">
                    <input   type="checkbox" name="checkShop" class="jdcheckbox"
                             clstag="pageclick|keycount|Shopcart_CheckShop|1_10907465" v-else=""  @click="checkedShop($event,car)">
                </div>
                <span class="shop-txt">
                    <a href="//mall.jd.com/index-10662258.html" class="shop-name" target="_blank"
                                        rel="noreferrer" data-vendorid="10907465"
                                        clstag="pageclick|keycount|Shopcart_Shopid|10907465">
                        <i class="vendor-icon undefined" title="">
                        </i>{{car.shopName}}
                    </a>
                    <i class="ml5 btn-im"></i>
                </span>
            </div>
            <br>
            <div class="item-list">
                <div class="item-combine">
                    <div class="item-item item-seleted" id="10033665972623" data-sku="10033665972623"
                         data-ts="1681211004188" data-skuuuid="F1yA4r1202690684881702912">
                        <div class="item-form">
                            <div class="cell p-checkbox">
                                <div class="cart-checkbox">
                                    <input type="checkbox"  />
                                    <span class="line-circle"></span>
                                </div>
                            </div>
                            <div class="cell p-goods">
                                <div class="goods-item">
                                    <div class="p-img ">
                                        <a :href="car.cover" target="_blank" rel="noreferrer" :title="car.title">
                                            <img style="width: 80px;height: 80px;" :src="car.cover" :alt="car.title">
                                        </a>
                                    </div>
                                    <div class="p-msg">
                                        <div class="p-name">
                                            <a href="" target="_blank" rel="noreferrer" :title="car.title"
                                                 clstag="pageclick|keycount|Shopcart_Productid|10033665972623_9">
                                                <i class="product-icon " title=""></i>
                                               {{car.title}}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cell p-props">
                                <div class="props-txt">
                                    <span class="">{{car.userShopping.number}}</span></div>
                            </div>
                            <div class="cell p-price">
                                <span class="p-price-cont">{{car.price}}</span>
                            </div>
                            <div class="cell p-quantity" style="margin-left:63px;">
                                <div class="cart-number quantity ">
                                    <button  class="cart-number-dec ">
                                        <i class="cart-icon-subt" v-on:click="reduceNumber(car)">-</i>
                                    </button>
                                    <div class="cart-input">
                                        <input class="cart-input-o" min="1" max="3" :value="car.userShopping.number" >

                                    </div>
                                    <button class="cart-number-inc">
                                        <i class="" v-on:click="addNumber(car)">+</i>
                                    </button>
                                </div>
                            </div>
                            <div class="cell p-sum"><strong>{{car.userShopping.number * car.price}}</strong></div>
                            <div class="cell p-ops" style="margin-left: 34px;">
                                <a href="#none" class="p-ops-item"
                                   clstag="pageclick|keycount|Shopcart_Delete|10033665972623"
                                   v-on:click="deleteShop(car.id)">删除</a>
                            </div>
                        </div>

                        <div class="product-extra mb10"></div>
                        <div class="item-line"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

        <div>
            <div>
                <div style="padding-bottom: 52px;"></div>
                <div class="cart-floatbar cart-floatbar-fixed"
                     style="position: fixed; transform: translateZ(0px); top: auto; bottom: 0px;">
                    <div class="cart-floatbar">
                        <div class="cart-toolbar">
                            <div class="toolbar-wrap"><input type="hidden" id="checkedCartState" value="1">
                                <div class="selected-item-list hide" style="display: none;"></div>
                                <div class="options-box">
                                    <div class="left">
                                        <div class="select-all">
                                            <input type="checkbox" class="jdcheckbox"
                                                                       clstag="pageclick|keycount|Shopcart_CheckAll|0">全选
                                        </div>
                                        <div class="operation">

                                            <a href="#none" class="opt-batch-remove">删除选中的商品</a>
                                            <a href="#none" class="opt-batch-follow">移入关注</a>
                                            <a href="#none" class="opt-cleaner" title="亲，点我可快速清空购物车商品哦！">
                                                <strong @click="removeShop">清空购物车</strong>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="right">
                                        <div class="combine">
                                            <div class="btn-area"><a class="common-submit-btn" href="#none"
                                                                     clstag="pageclick|keycount|Shopcart_Pay|0">去结算<b></b></a>
                                            </div>
                                            <div class="price-sum">
                                                <div>
                                                    <div class="price-sum-amount">
                                                        <div class="price-show"><span class="txt">总价：</span><span
                                                                class="price priceShow"><em>￥6.15</em></span><b
                                                                class="ml5 price-tips"></b>
                                                            <div class="price-tipsbox-new">
                                                                <div class="ui-tips-main">不含运费及送装服务费</div>
                                                                <span class="price-tipsbox-arrow"></span></div>
                                                        </div>
                                                        <span class="amount-sum">已选择<em> {{product[0]}}</em>件商品<b
                                                                class="up"></b></span>

                                                    </div>
                                                    <div class="price-sum-extra"></div>
                                                </div>
                                            </div>
                                            <div class="clr"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clr"></div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el:"#userDiv",
        data:{
            userId:null,
            shoppings:[],
            count:1,
            shoppObject:{
                carId:null,
                userId:null,
                count:1
            },
            state:0,
            cars:{
            },
            product:[],
            total:5

        },
        methods:{
            updateShopping(car){
                //调用后端接口
                this.$http.put("/shopcar",car)
                    .then(res=>{
                        res=res.data;
                        if(res.success){
                            alert("选择成功")
                            this.getShopData()
                        }else {
                            alert("选择失败")
                        }

                    })
            },
            checkedShop(event,car){
                let check=$(event.target).attr("checked")
                if(check){
                    console.log(111)
                    this.state=1

                        car.state=1
                    this.product.push(car.title)

                this.updateShopping(car)

                }else {
                    console.log(222)
                    car.state=2
                    this.product.pop(car.title)
                    this.updateShopping(car)
                }
            },
            //移除全部购物车
            removeShop(){
                this.$http.delete("/shopcar/deleteAll/"+this.userId)
                    .then(res =>{
                        res=res.data
                        if(res.success){
                            alert("删除全部购物商品成功")
                            this.getShopData()
                        }else {
                            alert("删除全部购物商品失败")
                        }
                    })
            },
            //减少数量
            reduceNumber(car){
                if(car.userShopping.number<=1){
                    alert("最小数量为1")
                    car.userShopping.number=1

                }else {
                    car.userShopping.number--;
                    console.log(car)
                    this.shoppObject.carId=car.carId
                    this.shoppObject.userId=car.logninfoId;
                    this.shoppObject.count=car.userShopping.number
                    this.shoppObject.totalPrice=car.userShopping.number*car.price

                    console.log(this.shoppObject);

                    this.$http.put("/userShopping",this.shoppObject)
                    .then(res =>{
                        res=res.data
                        if(res.success){
                            alert("修改数量成功")
                        }else {
                            alert("修改失败")
                        }
                    })
                }

            },
            addNumber(car){
                if(this.count>=3){
                    alert("最大数量为3")
                    car.userShopping.number=3;

                }else {
                    car.userShopping.number++
                    console.log(car)
                    this.shoppObject.carId=car.carId
                    this.shoppObject.userId=car.logninfoId;
                    this.shoppObject.count=car.userShopping.number
                    this.shoppObject.totalPrice=car.userShopping.number*car.price
                    console.log(this.shoppObject);

                    this.$http.put("/userShopping",this.shoppObject)
                        .then(res =>{
                            res=res.data
                            if(res.success){
                                alert("增加数量成功")
                            }else {
                                alert("修改失败")
                            }
                        })

                }

            },

            getShopData(){
                this.$http.get("/shopcar/shopping/"+this.userId)
                            .then(res => {
                                res=res.data;
                                if(res.success){
                                    this.shoppings=res.object
                                    console.log(res)
                                    this.product=res.object.map(title => title.title);
                                }else {
                                    alert("查询失败")
                                }
                            })

            },
            deleteShop(event){
                console.log(event);
                this.$http.delete("/shopcar/"+event)
                            .then(res => {
                                res=res.data;
                                if(res.success){
                                    alert("删除成功")
                                    this.getShopData()
                                }else {
                                    alert("删除失败")
                                }
                            })
            },
        },

        mounted(){
            //调用后端接口，展示用户收藏数据
            pare=pareUrl()
            this.userId=pare.userId;
            this.getShopData()

        }
    })
</script>
</body>
</html>